CSS സബ്ഗ്രിഡ് മൾട്ടി-ഡൈമെൻഷണൽ: കോംപ്ലക്സ് ഗ്രിഡ് ഇൻഹെറിറ്റൻസ് അൺലീഷ് ചെയ്യുന്നു

CSS ഗ്രിഡ് ലേഔട്ട് വെബ് ഡിസൈനിൽ വിപ്ലവം സൃഷ്ടിച്ചു, ഇത് പേജ് ഘടനയിൽ സമാനതകളില്ലാത്ത നിയന്ത്രണം നൽകുന്നു. എന്നിരുന്നാലും, ലേഔട്ടുകൾ കൂടുതൽ സങ്കീർണ്ണമാകുമ്പോൾ, കൂടുതൽ നൂതനമായ സാങ്കേതിക വിദ്യകളുടെ ആവശ്യകത ഉയർന്നുവരുന്നു. CSS സബ്ഗ്രിഡിലേക്ക് പ്രവേശിക്കുക, ഗ്രിഡ് ലേഔട്ടിനെ മെച്ചപ്പെടുത്തുന്ന ഒരു ശക്തമായ ഫീച്ചറാണിത്, ഗ്രിഡ് ഇനങ്ങളെ അവയുടെParent ഗ്രിഡിന്റെ ട്രാക്ക് നിർവചനങ്ങൾ സ്വീകരിക്കാൻ അനുവദിക്കുന്നു. ഇത് മൾട്ടി ഡൈമെൻഷണൽ ലേഔട്ടുകൾക്ക് സാധ്യത നൽകുന്നു, അവിടെ ഘടകങ്ങൾക്ക് മൊത്തത്തിലുള്ള ഗ്രിഡ് ഘടനയുമായി വിന്യാസം നിലനിർത്തിക്കൊണ്ട് വരികളും നിരകളും വ്യാപിക്കാൻ കഴിയും.

CSS ഗ്രിഡ് ലേഔട്ട് മനസിലാക്കുക: ഒരു ദ്രുത അവലോകനം

സബ്ഗ്രിഡിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, CSS ഗ്രിഡ് ലേഔട്ടിന്റെ പ്രധാന ആശയങ്ങൾ നമുക്ക് ചുരുக்கமாக അവലോകനം ചെയ്യാം:

• ഗ്രിഡ് കണ്ടെയ്‌നർ: display: grid അല്ലെങ്കിൽ display: inline-grid ഉപയോഗിച്ച് ഗ്രിഡ് കോൺടെക്സ്റ്റ് സ്ഥാപിക്കുന്നParent എലമെന്റ്.
• ഗ്രിഡ് ഇനങ്ങൾ: ഗ്രിഡിനുള്ളിൽ സ്ഥാപിച്ചിട്ടുള്ള ഗ്രിഡ് കണ്ടെയ്‌നറിന്റെ നേരിട്ടുള്ള കുട്ടികൾ.
• ഗ്രിഡ് ട്രാക്കുകൾ: grid-template-rows, grid-template-columns പോലുള്ള പ്രോപ്പർട്ടികളാൽ നിർവചിക്കപ്പെട്ടിട്ടുള്ള ഗ്രിഡിന്റെ വരികളും നിരകളും. ഇവ വരികളുടെയും നിരകളുടെയും വലുപ്പവും എണ്ണവും നിർവചിക്കുന്നു.
• ഗ്രിഡ് ലൈനുകൾ: ഗ്രിഡ് ട്രാക്കുകളെ വേർതിരിക്കുന്ന തിരശ്ചീനവും ലംബവുമായ രേഖകൾ. അവ 1 മുതൽ നമ്പറിട്ടിരിക്കുന്നു.
• ഗ്രിഡ് ഏരിയകൾ: grid-template-areas ഉപയോഗിച്ച് നിർവചിക്കപ്പെട്ടിട്ടുള്ള ഗ്രിഡിനുള്ളിലെ නම් നൽകിയിട്ടുള്ള ഭാഗങ്ങൾ.

ഈ അടിസ്ഥാനകാര്യങ്ങൾ ഉപയോഗിച്ച്, CSS സബ്ഗ്രിഡിന്റെ സങ്കീർണതകളും നേട്ടങ്ങളും നമുക്ക് പര്യവേക്ഷണം ചെയ്യാൻ കഴിയും.

CSS സബ്ഗ്രിഡ് അവതരിപ്പിക്കുന്നു: ഗ്രിഡ് ട്രാക്കുകൾ ഇൻഹെറിറ്റ് ചെയ്യുന്നു

സബ്ഗ്രിഡ് ഒരു ഗ്രിഡ് ഇനത്തെ അതിന്റെParent ഗ്രിഡിൽ നിന്ന് റോ അല്ലെങ്കിൽ കോളം ട്രാക്കുകൾ ഇൻഹെറിറ്റ് ചെയ്ത് സ്വയം ഒരു ഗ്രിഡ് കണ്ടെയ്‌നറാകാൻ അനുവദിക്കുന്നു. ഇതിനർത്ഥം, സബ്ഗ്രിഡിന് അതിന്റെ ഉള്ളടക്കത്തെParent ഗ്രിഡിന്റെ ലൈനുകളുമായി വിന്യസിക്കാൻ കഴിയും, ഇത് ഒരു ഏകീകൃതവും ദൃശ്യപരമായി ആകർഷകവുമായ ലേഔട്ട് സൃഷ്ടിക്കുന്നു, പ്രത്യേകിച്ചുംParent ഗ്രിഡിലെ ഒന്നിലധികം വരികളിലോ നിരകളിലോ വ്യാപിക്കുന്ന ഘടകങ്ങളുമായി التعامل ചെയ്യുമ്പോൾ.

സബ്ഗ്രിഡ് പ്രവർത്തനക്ഷമമാക്കുന്നതിനുള്ള പ്രധാന പ്രോപ്പർട്ടി grid-template-rows: subgrid കൂടാതെ/അല്ലെങ്കിൽ grid-template-columns: subgrid എന്നിവയാണ്. ഒരു ഗ്രിഡ് ഇനത്തിൽ പ്രയോഗിക്കുമ്പോൾ, ഈ പ്രോപ്പർട്ടികൾParent ഗ്രിഡിൽ നിന്ന് തത്തുല്യമായ ട്രാക്കുകൾ ഉപയോഗിക്കാൻ ബ്രൗസറിനോട് പറയുന്നു.

അടിസ്ഥാന സബ്ഗ്രിഡ് നടപ്പിലാക്കൽ

ഒരു ലളിതമായ ഉദാഹരണം പരിഗണിക്കാം:

.grid-container {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr;
 grid-template-rows: auto auto auto;
}

.grid-item {
 /* Styles for grid items */
}

.subgrid-item {
 display: grid;
 grid-template-columns: subgrid;
}

ഈ ഉദാഹരണത്തിൽ, .grid-container മൂന്ന് നിരകളും മൂന്ന് വരികളുമുള്ള പ്രധാന ഗ്രിഡ് ഘടനയെ നിർവചിക്കുന്നു. .subgrid-item എന്നത് .grid-container-ലെ ഒരു ഗ്രിഡ് ഇനമാണ്, അത് അതിന്റെ നിരകൾക്കായി സബ്ഗ്രിഡ് ഉപയോഗിക്കുന്നതിന് ക്രമീകരിച്ചിരിക്കുന്നു. ഇതിനർത്ഥം .subgrid-item-നുള്ളിലെ നിരകൾ .grid-container-ന്റെ നിരകളുമായി തികച്ചും വിന്യസിക്കും.

സബ്ഗ്രിഡ് ഉപയോഗിച്ച് മൾട്ടി-ഡൈമെൻഷണൽ ലേഔട്ടുകൾ

മൾട്ടി-ഡൈമെൻഷണൽ ലേഔട്ടുകൾ നിർമ്മിക്കുമ്പോൾ സബ്ഗ്രിഡിന്റെ യഥാർത്ഥ ശക്തി வெளிപ്പെടുന്നു. ഈ ലേഔട്ടുകളിൽ നെസ്റ്റഡ് ഗ്രിഡുകൾ ഉൾപ്പെടുന്നു, അവിടെ ഘടകങ്ങൾ ഒന്നിലധികം വരികളിലും നിരകളിലുമായി വ്യാപിക്കുന്നു, കൂടാതെ വിന്യാസം നിർണായകമാണ്.

ഉദാഹരണം: ഒരു സങ്കീർണ്ണമായ ഉൽപ്പന്ന കാർഡ്

ഒരു ചിത്രവും தலைப்பும் விளக்கവും कुछ অতিরিক্ত তথவல்களைக் காட்ட வேண்டிய ஒரு தயாரிப்பு அட்டையை கற்பனை செய்யவும். லேஅவுட் நெகிழ்வாகவும் 응답மாகவும் இருக்க வேண்டும், வெவ்வேறு திரை அளவுகளுக்கு ஏற்ப அமைத்துக் கொள்ள வேண்டும்.

.product-card {
 display: grid;
 grid-template-columns: 1fr 2fr;
 grid-template-rows: auto auto auto;
 gap: 10px;
}

.product-image {
 grid-row: 1 / span 2;
}

.product-details {
 display: grid;
 grid-template-columns: subgrid;
 grid-template-rows: auto auto;
}

.product-title {
 /* Styles for the title */
}

.product-description {
 /* Styles for the description */
}

.additional-info {
 grid-column: 1 / -1; /* Span all columns in the product card */
}

ഈ ഉദാഹരണത്തിൽ:

• .product-card ആണ് പ്രധാന ഗ്രിഡ് കണ്ടെയ്‌നർ.
• .product-image ആദ്യത്തെ രണ്ട് വരികളിൽ വ്യാപിക്കുന്നു.
• .product-details എന്നത് .product-card-ൽ നിന്ന് കോളം ട്രാക്കുകൾ ഇൻഹെറിറ്റ് ചെയ്യുന്ന ഒരു സബ്ഗ്രിഡാണ്, അതിന്റെ ഉള്ളടക്കം പ്രധാന ഗ്രിഡിന്റെ നിരകളുമായി വിന്യസിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.
• .additional-info ഉൽപ്പന്ന കാർഡിന്റെ എല്ലാ നിരകളിലും വ്യാപിക്കുന്നു, കൂടാതെ ചിത്രത്തിനും വിശദാംശങ്ങൾക്കും താഴെയായി അധിക വിവരങ്ങൾ ചേർക്കുന്നു.

ഈ ഘടന ഉൽപ്പന്ന കാർഡിനായി വഴക്കമുള്ളതും പരിപാലിക്കാൻ എളുപ്പമുള്ളതുമായ ലേഔട്ട് നൽകുന്നു. .product-details-നുള്ളിലെ തലക്കെട്ടും വിവരണവും പ്രധാന ഗ്രിഡിന്റെ കോളം ഘടനയുമായി തികച്ചും വിന്യസിച്ചിട്ടുണ്ടെന്ന് സബ്ഗ്രിഡ് ഉറപ്പാക്കുന്നു.

ഉദാഹരണം: ഒരു സങ്കീർണ്ണമായ പട്ടിക ലേഔട്ട്

ചേർത്ത സെല്ലുകളുള്ള പട്ടികകൾ ഒരു ലേഔട്ട് പേടിസ്വപ്നമായിരിക്കും. സബ്ഗ്രിഡ് ഇത് ലളിതമാക്കുന്നു.

.table-container {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 grid-template-rows: auto auto auto;
}

.header-cell {
 grid-column: span 2; /* Example: Cell spanning two columns */
}

.subgrid-row {
 display: grid;
 grid-template-columns: subgrid;
}

.data-cell {
 /* Styles for data cells */
}

ഇവിടെ, .table-container മൊത്തത്തിലുള്ള പട്ടിക ഗ്രിഡ് നിർവചിക്കുന്നു. `header-cell` എലമെന്റുകൾ ഒന്നിലധികം നിരകളിലായി വ്യാപിച്ചേക്കാം. `subgrid-row`Parent ഗ്രിഡിൽ നിർവചിച്ചിട്ടുള്ള നിരകളുമായി എല്ലാ `data-cell` എലമെന്റുകളും ശരിയായി വിന്യസിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ സബ്ഗ്രിഡ് ഉപയോഗിക്കുന്നു, തലക്കെട്ട് സെൽ സ്പാനുകൾ പരിഗണിക്കാതെ.

CSS സബ്ഗ്രിഡ് ഉപയോഗിക്കുന്നതിന്റെ പ്രയോജനങ്ങൾ

• മെച്ചപ്പെട്ട ലേഔട്ട് നിയന്ത്രണം: സങ്കീർണ്ണമായ ലേഔട്ടുകളിൽ പോലും, എലമെന്റ് സ്ഥാനനിർണയത്തിലും വിന്യാസത്തിലും സബ്ഗ്രിഡ് മികച്ച നിയന്ത്രണം നൽകുന്നു.
• ലളിതമായ കോഡിംഗ്: സങ്കീർണ്ണമായ കണക്കുകൂട്ടലുകളുടെയും സ്വമേധയായുള്ള ക്രമീകരണങ്ങളുടെയും ആവശ്യം ഇത് കുറയ്ക്കുന്നു, ഇത് വൃത്തിയുള്ളതും പരിപാലിക്കാൻ എളുപ്പമുള്ളതുമായ കോഡിലേക്ക് നയിക്കുന്നു.
• മെച്ചപ്പെടുത്തിയ പ്രതികരണശേഷി: വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങളുമായി പരിധികളില്ലാതെ പൊരുത്തപ്പെടുന്ന കൂടുതൽ വഴക്കമുള്ളതും പ്രതികരിക്കുന്നതുമായ ഡിസൈനുകൾക്ക് സബ്ഗ്രിഡ് അനുവദിക്കുന്നു.
• കൂടുതൽ സ്ഥിരത: മൊത്തത്തിലുള്ള ഗ്രിഡ് ഘടനയുമായുള്ള വിന്യാസം നിലനിർത്തുന്നതിലൂടെ ഒരു വെബ്സൈറ്റിന്റെ വിവിധ ഭാഗങ്ങളിൽ ദൃശ്യ സ്ഥിരത ഉറപ്പാക്കുന്നു.
• മെച്ചപ്പെട്ട నిర్వహണക്ഷമത:Parent ഗ്രിഡിലെ മാറ്റങ്ങൾ സബ്ഗ്രിഡുകളിലേക്ക് സ്വയമേവ വ്യാപിക്കുന്നു, ഇത് ലേഔട്ട് ക്രമീകരണങ്ങൾ ലളിതമാക്കുകയും പിശകുകൾക്കുള്ള സാധ്യത കുറയ്ക്കുകയും ചെയ്യുന്നു.

ബ്രൗസർ അനുയോജ്യത

Chrome, Firefox, Safari, Edge ഉൾപ്പെടെയുള്ള ആധുനിക ബ്രൗസറുകളിൽ CSS സബ്ഗ്രിഡിനുള്ള ബ്രൗസർ പിന്തുണ ഇപ്പോൾ വ്യാപകമായി ലഭ്യമാണ്. എന്നിരുന്നാലും, നിങ്ങളുടെ ടാർഗെറ്റ് പ്രേക്ഷകർക്ക് മതിയായ ബ്രൗസർ പിന്തുണയുണ്ടെന്ന് ഉറപ്പാക്കാൻ എനിക്ക് ഇത് ഉപയോഗിക്കാനാകുമോ പോലുള്ള വെബ്സൈറ്റുകളിൽ നിലവിലെ ബ്രൗസർ അനുയോജ്യത പട്ടിക പരിശോധിക്കേണ്ടത് അത്യാവശ്യമാണ്.

സബ്ഗ്രിഡിനെ പിന്തുണയ്ക്കാത്ത പഴയ ബ്രൗസറുകൾക്കായി, ഇനിപ്പറയുന്ന പോലുള്ള ബാക്ക്അപ്പ് തന്ത്രങ്ങൾ ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക:

• സബ്ഗ്രിഡ് ഇല്ലാത്ത CSS ഗ്രിഡ്: കൂടുതൽ സ്വമേധയായുള്ള ക്രമീകരണങ്ങൾ ആവശ്യമായി വരുന്ന സാധാരണ CSS ഗ്രിഡ് ഫീച്ചറുകൾ ഉപയോഗിച്ച് ലേഔട്ട് ആവർത്തിക്കുക.
• ഫ്ലെക്സ്ബോക്സ്: ലളിതമായ ലേഔട്ടുകൾക്കായി ഒരു ബാക്ക്അപ്പായി ഫ്ലെക്സ്ബോക്സ് ഉപയോഗിക്കുക.
• ഫീച്ചർ അന്വേഷണങ്ങൾ: സബ്ഗ്രിഡ് പിന്തുണ കണ്ടെത്താനും അതിനനുസരിച്ച് വ്യത്യസ്ത ശൈലികൾ പ്രയോഗിക്കാനും @supports ഉപയോഗിക്കുക.

CSS സബ്ഗ്രിഡ് ഉപയോഗിക്കുന്നതിനുള്ള മികച്ച രീതികൾ

• നിങ്ങളുടെ ഗ്രിഡ് ഘടന ആസൂത്രണം ചെയ്യുക: സബ്ഗ്രിഡ് നടപ്പിലാക്കുന്നതിന് മുമ്പ്, നിങ്ങളുടെ ഗ്രിഡ് ഘടന ശ്രദ്ധാപൂർവ്വം ആസൂത്രണം ചെയ്യുകയും സബ്ഗ്രിഡ് ഏറ്റവും പ്രയോജനകരമായ பகுதிகளை அடையாளம் காணவும்.
• അർത്ഥവത്തായ ക്ലാസ് പേരുകൾ ഉപയോഗിക്കുക: കോഡ് ரீடபிலிட்டியையும் रखरखाव හැකියை提高 ചെയ്യാൻ వివரிக்க கூடிய வகுப்பு പേരുകൾ ഉപയോഗിക്കുക.
• അമിതമായ നെസ്റ്റിംഗ് ഒഴിവാക്കുക: സബ്ഗ്രിഡ് നെസ്റ്റഡ് ഗ്രിഡുകൾ അനുവദിക്കുമ്പോൾ, അമിതമായ നെസ്റ്റിംഗ് ഒഴിവാക്കുക, കാരണം ഇത് ലേഔട്ട് നിയന്ത്രിക്കാൻ ബുദ്ധിമുട്ടുണ്ടാക്കും.
• ശരിയായി പരീക്ഷിക്കുക: നിങ്ങളുടെ ലേഔട്ട് വ്യത്യസ്ത ബ്രൗസറുകളിലും ഉപകരണങ്ങളിലും ശരിയായി റെൻഡർ ചെയ്യുന്നുണ്ടെന്നും റെസ്‌പോൺസീവ് ആണെന്നും ഉറപ്പാക്കാൻ പരിശോധിക്കുക.
• ബാക്ക്അപ്പുകൾ നൽകുക: സബ്ഗ്രിഡിനെ പിന്തുണയ്ക്കാത്ത பழைய ബ്രൗസറുകൾക്കായി ബാക്ക്അപ്പ് തന്ത്രങ്ങൾ നടപ്പിലാക്കുക.
• Accessibility പരിഗണിക്കുക: உங்களுடைய ലേഔട്ട് இயலாத பயனர்களுக்கு உதவ கூடிய வகையில் அனுகூலமாய் இருக்கின்றது என்பதை உறுதிப்படுத்திக்கொள்ளுங்கள். സിമാண்டிக் HTML ഉപയോഗിക്കുക, കൂടാതെ ചിത്രങ്ങൾക്കായി மாற்று உரைகளை வழங்கുക.
• പ്രകടനത്തിനായി ഒപ്റ്റിമൈസ് ചെയ്യുക: ഗ്രിഡ് ഇനങ്ങളുടെ എണ്ണം കുറയ്ക്കുക കൂടാതെ சிறந்த செயல்திறனை உறுதிப்படுத்த சிக்கலான கணக்கீடுகளை தவிர்க்கவும்.

നൂതന സബ്ഗ്രിഡ് സാങ്കേതിക വിദ്യകൾ

സബ്ഗ്രിഡിലെ ട്രാക്കുകൾ വ്യാപിക്കുന്നു

സാധാരണ ഗ്രിഡ് ലേഔട്ടിലെപ്പോലെ, സബ്ഗ്രിഡിനുള്ളിൽ ഒരു ഇനத்தை உருவாக்க grid-column: span X அல்லது grid-row: span Y உபயோகிக்கலாம்.

.subgrid-item {
 display: grid;
 grid-template-columns: subgrid;
}

.spanning-item {
 grid-column: span 2;
}

ഇത് സബ്ഗ്രിഡിനുള്ളിൽ இரண்டு நிரல் பாதைகளை ஆக்கிரமிக்க உதவும்.

പേരുള്ള ഗ്രിഡ് ലൈനുകൾ ഉപയോഗിക്കുന്നു

பெற்றோர் ഗிரிடில் உள்ள නම් செய்யப்பட்ட கோடுகளை நீங்கள் உபயோகிக்கலாம் மேலும் அதை சப் கிரிடில் உபயோகிக்கலாம். இது உங்களுடைய கோடை வாசிப்பதற்கும் பராமரிப்பதற்கும் எளிதாக உதவிடும்.

.grid-container {
 display: grid;
 grid-template-columns: [start] 1fr [content-start] 2fr [content-end] 1fr [end];
}

.subgrid-item {
 display: grid;
 grid-template-columns: subgrid;
}

.positioned-item {
 grid-column: content-start / content-end;
}

உதாரணமாக .positioned-item ஆனது content-start மற்றும் content-end என்று பெயரிடப்பட்ட கிரிட் கோடுகளுக்கு இடையில் வைக்கப்பட்டிருக்கும்.

சுயமாக வைப்பதற்கு சப் கிரிடை ஒருங்கிணைத்தல்

சப் கிரிடை grid-auto-flow உடன் இணைப்பதன் மூலம் சப் கிரிடில் எவையெல்லாம் சுயமாக வைக்க வேண்டும் என்பதையும் கட்டுப்படுத்த முடியும்.

.subgrid-item {
 display: grid;
 grid-template-columns: subgrid;
 grid-auto-flow: row dense;
}

இதன்மூலம் உங்களது சப் கிரிடில் உள்ள இடைவெளிகளை நிரப்பி ஒரு சிறிய லேஅவுட்டை உருவாக்கலாம்.

செயலில் உள்ள சப் கிரிடுக்கான நிஜ உலக எடுத்துக்காட்டுகள்

டாஷ்போர்டு லேஅவுட்கள்

டாஷ்போர்டுகளுக்கு பல பிரிவுகளையும் கூறுகளையும் கொண்ட சிக்கலான லேஅவுட்கள் தேவைப்படுகின்றன. ஒட்டுமொத்த டாஷ்போர்டுக்கு ஒரு நிலையான மற்றும் பதிலளிக்கக்கூடிய கிரிட் கட்டமைப்பு சப் கிரிட் மூலம் உருவாக்க முடியும். மேலும் அனைத்து கூறுகளும் சரியாக சீரமைக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்த முடியும்.

உதாரணமாக ஒரு டாஷ்போர்டில் சைட் பார், முதன்மை உள்ளடக்கம் மற்றும் அடிக்குறிப்பு இருப்பதாக கருதுங்கள். இந்த பிரிவுகளின் உள்ளடக்கத்தை ஒட்டுமொத்த டாஷ்போர்டின் கிரிட் அமைப்புடன் சீரமைக்க சப் கிரிட் பயன்படுத்தப்படலாம்.

பத்திரிகை லேஅவுட்கள்

பத்திரிகை லேஅவுட்கள் வழக்கமாக படங்கள், உரைகள் மற்றும் பிற கூறுகளை காட்சிக்கு ஏற்றவாறு ஒருங்கமைக்கப்பட்ட சிக்கலான வடிவமைப்புகளை உள்ளடக்கியது. பத்திரிகை லேஅவுட்டிற்கான ஒரு நெகிழ்வான மற்றும் பதிலளிக்கக்கூடிய கிரிட் கட்டமைப்பை உருவாக்க சப் கிரிடைப் பயன்படுத்தலாம். மேலும் உள்ளடக்கத்தை மாறும் வகையில் வைக்கவும் சீரமைக்கவும் முடியும்.

ஒரு முக்கிய கட்டுரை, பக்கவாட்டு பட்டைகள் மற்றும் விளம்பரங்களுடன் கூடிய ஒரு பத்திரிகை லேஅவுட்டை கற்பனை செய்து பாருங்கள். இந்த பிரிவுகளின் உள்ளடக்கத்தை பத்திரிகையின் கிரிட் கட்டமைப்புடன் சீரமைக்க சப் கிரிடை பயன்படுத்தலாம்.

மின்வணிக தயாரிப்பு பட்டியல்கள்

மின்வணிக இணையதளங்களில் தயாரிப்பு பட்டியல்கள் கிரிட் வடிவமைப்பில் காட்டப்படும். தயாரிப்பு பட்டியல்களுக்கு ஒரு நிலையான மற்றும் பதிலளிக்கக்கூடிய கிரிட் கட்டமைப்பை உருவாக்க சப் கிரிடைப் பயன்படுத்தலாம். மேலும் தயாரிப்பு அட்டைகள் சரியாக சீரமைக்கப்பட்டு வெவ்வேறு திரை அளவுகளுக்கு ஏற்றதாக்கப்படுவதையும் உறுதிப்படுத்த முடியும்.

பல தயாரிப்பு அட்டைகளுடன் கூடிய ஒரு தயாரிப்பு பட்டியல் பக்கத்தை கருத்தில் கொள்ளுங்கள். ஒவ்வொரு தயாரிப்பு அட்டையும் ஒரு படம், தலைப்பு, விளக்கம் மற்றும் விலை ஆகியவற்றைக் கொண்டுள்ளது. ஒவ்வொரு தயாரிப்பு அட்டையிலும் உள்ள கூறுகளை தயாரிப்பு பட்டியல் பக்கத்தின் ஒட்டுமொத்த கிரிட் அமைப்புடன் சீரமைக்க சப் கிரிடைப் பயன்படுத்தலாம்.

CSS கிரிட் மற்றும் சப் கிரிட்டின் எதிர்காலம்

புதிய அம்சங்கள் மற்றும் மேம்பாடுகளுடன் CSS கிரிட் லேஅவுட் மற்றும் சப் கிரிட் தொடர்ந்து வளர்ச்சியடைந்து வருகிறது. உலாவியின் ஆதரவு தொடர்ந்து மேம்பட்டு வருவதால், நவீன மற்றும் பதிலளிக்கக்கூடிய வெப் லேஅவுட்களை உருவாக்குவதற்கு இந்த தொழில்நுட்பங்கள் மேலும் அவசியமாக இருக்கும்.

CSS கிரிட் மற்றும் சப் கிரிட்டின் எதிர்காலம் என்பது:

• மேம்படுத்தப்பட்ட செயல்திறன்: கிரிட் மற்றும் சப் கிரிட் லேஅவுட்களின் ரெண்டரிங் செயல்திறனை மேம்படுத்துவதற்கான மேம்படுத்தல்கள்.
• மேலும் மேம்பட்ட அம்சங்கள்: லேஅவுட் மற்றும் சீரமைப்பில் இன்னும் கூடுதலான கட்டுப்பாட்டை வழங்க புதிய அம்சங்கள்.
• பிற வெப் தொழில்நுட்பங்களுடன் சிறந்த ஒருங்கிணைப்பு: வெப் கூறுகள் மற்றும் ஜாவாஸ்கிரிப்ட் கட்டமைப்புகள் போன்ற பிற வெப் தொழில்நுட்பங்களுடன் தடையற்ற ஒருங்கிணைப்பு.

முடிவு: சப் கிரிட்டின் சக்தியைத் தழுவுங்கள்

மேம்பட்ட கிரிட் பரம்பரையுடன் கூடிய சிக்கலான, பன்முகத்தன்மை லேஅவுட்களை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த கருவி CSS சப் கிரிட் ஆகும். கிரிட் லேஅவுட்டின் அடிப்படைகள் மற்றும் சப் கிரிட்டின் திறன்களைப் புரிந்துகொள்வதன் மூலம் வெப் வடிவமைப்பிற்கான புதிய சாத்தியங்களைத் திறக்கலாம். மேலும் காட்சிக்கு மிகவும் ஈர்க்கும் மற்றும் பதிலளிக்கக்கூடிய வலைத்தளங்களை உருவாக்கலாம்.

சப் கிரிட்டிற்கான உலாவியின் ஆதரவு தொடர்ந்து மேம்பட்டு வருவதால், இது வெப் டெவலப்பரின் கருவித்தொகுப்பின் ஒரு முக்கியமான பகுதியாக மாறும். எனவே சப் கிரிட்டின் சக்தியைத் தழுவி, அதன் திறன்களைக் கொண்டு சிறந்த மற்றும் புதுமையான வெப் லேஅவுட்களை உருவாக்கத் தொடங்குங்கள்.

CSS சப் கிரிட்டின் முழு திறனையும் ஆராய தயங்க வேண்டாம். சாத்தியக்கூறுகள் அதிகம். இதன் விளைவாக கிடைக்கும் பலன்கள் உண்மையில் பாராட்டத்தக்கவை. குறியீட்டை மகிழ்ச்சியாக எழுதுங்கள்!

மேலும் கற்றல் ஆதாரங்கள்

• MDN Web Docs: CSS Subgrid Layout
• CSS-Tricks: Subgrid Is Coming to Firefox
• Grid by Example